<!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>热点地图</title>
            <style>
                *{
                    margin: 0;
                    padding: 0;
                }
                .bord{
                    border: 1px dashed #ee2602;
                    width: 90%;
                    margin: 20px auto;
                }
                .title{
                    font-size: 20px;
                    font-weight: bold;
                    margin: 20px;
                }
                .introduce{
                    font-size: 16px;
                    margin: 0 0 20px 50px;
                }
                .red{
                    color: red;
                }
            </style>
        </head>
        <body>
        <div class="bord">
            <div class="title">热点地图</div>
            <div class="introduce">
                          ect矩形<br/>
        　　　　　　　　  circle圆形<br/>
        　　　　　　　　  poly多边形<br/>
                    coords热点坐标<br/>
                　　　　　　　　  矩形起点坐标[x,y]0,0  终点坐标[x,y]100,100）<br/>
                　　　　　　　　  圆形坐标[x,y,r]圆心坐标，r=半径<br/>
                　　　　　　　　  多边形[x,y,z]各点的坐标</p><br/>
            </div>
        </div>
        <div class="bord">
            <div class="title">演示效果</div>
            <div class="introduce">
                <img src="../img/IMG_4741.JPG" usemap="#myMap">
                <map name = 'myMap'>
                    <area title = "me" shape = "circle" coords="300,230,80" href = "isme.html">
                    <area title = "school" shape = "rect" coords="400,300,500,350" href = "school.html">
                    <area title = "sky" shape = "poly" coords="0,50, 100,70, 170,110, 130,130, 70,150, 0,140" href = "sky.html">
                </map>
            </div>
        </div>
        <div class="bord">
            <div class="title">代码</div>
            <div class="introduce">
                &lt;img src="../img/IMG_4741.JPG" usemap="#myMap"&gt;<br/>
                　　　&lt;map name = 'myMap'&gt;<br/>
                　　　圆形：&lt;area title = "me" shape = "circle" coords="300,230,80" href = "isme.html"&gt;<br/>
                　　　矩形：&lt;area title = "school" shape = "rect" coords="400,300,500,350" href = "school.html"&gt;<br/>
                　　　多边形：&lt;area title = "sky" shape = "poly" coords="0,50, 100,70, 170,110, 130,130, 70,150, 0,140" href = "sky.html"&gt;<br/>
                　　　&lt;/map&gt;
            </div>
        </div>
        </body>
        </html>